<template>
	<view class="register">

		<view class="content">
			<view class="back">
				<text class="lg text-gray cuIcon-back"></text>
			</view>
			<view class="login_title">
				欢迎注册！
			</view>
			
			<!-- 主体 -->
			<view class="main">
				<wInput v-model="phoneData" type="text" maxlength="11" placeholder="手机号"></wInput>
				<wInput v-model="verCode" type="number" maxlength="6" placeholder="验证码" isShowCode ref="runCode" @setCode="getVerCode()"></wInput>
				<wInput v-model="passData" type="password" maxlength="11" placeholder="登录密码" isShowPass></wInput>


			</view>

			<wButton text="注 册" :rotate="isRotate" @click.native="startReg()"></wButton>

			<!-- 底部信息 -->
			<view class="footer">
				<text @tap="isShowAgree" class="cuIcon" :class="showAgree?'cuIcon-radiobox':'cuIcon-round'">注册即代表同意</text>
				<!-- 协议地址 -->
				<navigator url="" open-type="navigate">
					《快影用户协议及隐私保护声明》
				</navigator>
			</view>

			<view class="to_signin">
				已有账号，<span @tap="navigateToLogin()">立即登录</span>
			</view>
		</view>
	</view>
</template>

<script>
	var _this;
	import wInput from '../../components/watch-login/watch-input.vue' //input
	import wButton from '../../components/watch-login/watch-button.vue' //button

	export default {
		data() {
			return {
				phoneData: '', // 用户/电话
				passData: '', //密码
				verCode: "", //验证码
				showAgree: true, //协议是否选择
				isRotate: false, //是否加载旋转
				
			}
		},
		components: {
			wInput,
			wButton,
		},
		mounted() {
			_this = this;
		},
		methods: {
			navigateToLogin() {
				uni.navigateTo({
					url: '../login/login'
				})
			},
			isShowAgree() {
				//是否选择协议
				_this.showAgree = !_this.showAgree;
			},
			getVerCode() {
				//获取验证码


				if (this.phoneData.length != 11) {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '手机号不正确'
					});
					return false;
				}
				
				uni.request({
					url:'http://221.234.36.126:82/api.php/Login/send_msg',
					data:{
						user_phone:this.phoneData,
						type:1,
						token:'1CECE2221211DDCB613882C3311EC670'
					},
					method:'POST',
					header: {
						'content-type': 'application/json;charset=UTF-8' 
					},
					success:(res) => {
						uni.setStorageSync('code_id',res.data.data);
						uni.showToast({
							icon: 'none',
							position: 'bottom',
							title: res.data.msg
						});
						// console.log(res.data)
					}
				})
				// console.log("获取验证码")
				// this.$codeText("重新获取");
				this.$refs.runCode.$emit('runCode'); //触发倒计时（一般用于请求成功验证码后调用）

				uni.showToast({
					icon: 'none',
					position: 'bottom',
					title: '模拟倒计时触发'
				});

				setTimeout(function() {
					_this.$refs.runCode.$emit('runCode', 0); //假装模拟下需要 终止倒计时
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '模拟倒计时终止'
					});
				}, 10000)
			},
			startReg() {
				//注册
				if (this.isRotate) {
					//判断是否加载中，避免重复点击请求
					return false;
				}
				if (this.showAgree == false) {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '请先同意《协议》'
					});
					return false;
				}
				if (this.phoneData.length != 11) {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '手机号不正确'
					});
					return false;
				}
				if (this.passData.length < 6) {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '密码不正确'
					});
					return false;
				}
				if (this.verCode.length != 6) {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '验证码不正确'
					});
					return false;
				}
				let phone = this.phoneData;
				let code = this.verCode;
				let pass = this.passData;
				const msg_id = uni.getStorageSync('code_id');
				let code_id = msg_id.msg_id;
				// console.log(code_id);
				uni.request({
					url:'http://221.234.36.126:82/api.php/Login/register',
					data:{
						user_phone:phone,
						verify:code,
						user_pwd:pass,
						msg_id:code_id,
						token:'1CECE2221211DDCB613882C3311EC670'
					},
					method:'POST',
					header: {
						'content-type': 'application/json;charset=UTF-8' 
					},
					success: (res) => {
						uni.showToast({
							icon: 'none',
							position: 'bottom',
							title: res.data.msg
						});
					}
				})
				_this.isRotate = true
				setTimeout(function() {
					_this.isRotate = false
				}, 3000)
			}
		}
	}
</script>

<style>
	@import url("../../components/watch-login/css/icon.css");

	/* @import url("./css/main.css"); */
	.content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		/* margin-top: 128upx; */
	}

	.back {
		font-size: 32rpx;
		/* margin-top: 35rpx; */
		margin-left: 24rpx;
		width: 32rpx;
	}

	.back text {
		font-size: 32rpx;
		color: #333333;
	}

	.login_title {
		width: 100%;
		font-size: 40rpx;
		color: #333333;
		box-sizing: border-box;
		padding-left: 30rpx;
		margin-top: 70rpx;
		font-weight: 600;
		letter-spacing: 3rpx;
	}


	/* 主体 */
	.main {
		display: flex;
		flex-direction: column;
		/* padding-left: 70upx;
		padding-right: 70upx; */
		padding: 0 30rpx;
		margin-top: 90rpx;
	}

	.main-input {
		margin-left: 0;
	}

	.main-list {
		border-radius: 0;
		border-bottom: #EFEFEF 1px solid;
		box-shadow: none;
		padding: 32rpx 0;
	}

	.tips {
		color: #999999;
		font-size: 28upx;
		margin-top: 64upx;
		margin-left: 48upx;
	}
	
	.buttonBorder{
		box-shadow: none;
	}
	
	.footer>text{
		color: #999999;
	}
	
	navigator{
		color: #00A7FF;
	}

	/* 其他登录方式 */
	.other_login {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin-top: 256upx;
		text-align: center;
	}

	.login_icon {
		border: none;
		font-size: 64upx;
		margin: 0 64upx 0 64upx;
		color: rgba(0, 0, 0, 0.7)
	}

	.wechat_color {
		color: #83DC42;
	}

	.weibo_color {
		color: #F9221D;
	}

	.github_color {
		color: #24292E;
	}

	/* 底部 */
	.footer {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		font-size: 28upx;
		margin-top: 64upx;
		color: rgba(0, 0, 0, 0.7);
		text-align: center;
		height: 40upx;
		line-height: 40upx;
	}

	.footer text {
		font-size: 24upx;
		margin-left: 15upx;
		margin-right: 15upx;
	}

	.to_signin {
		width: 100%;
		text-align: center;
		font-size: 26rpx;
		color: #999999;
		margin-top: 40rpx;
	}

	.to_signin span {
		color: #00A7FF;
	}
</style>
